<template>
  <div >
    <el-row>
      <el-col :span="6" class="grid-cell">【题型】：
        <span v-if="itemList.questionType ==='1'">单选</span>
        <span v-else-if="itemList.questionType ==='2'">多选</span>
        <span v-else>简答</span>
      </el-col>
      <el-col :span="6" class="grid-cell">【编号】：{{itemList.id}}</el-col>
      <el-col :span="6" class="grid-cell">【难度】：
        <span v-if="itemList.difficulty ==='1'">简单</span>
        <span v-else-if="itemList.difficulty ==='2'">一般</span>
        <span v-else>困难</span>
      </el-col>
      <el-col :span="6" class="grid-cell">【标签】：{{itemList.tags}}</el-col>
      <el-col :span="6" class="grid-cell">【学科】：{{itemList.subjectName}}</el-col>
      <el-col :span="6" class="grid-cell">【目录】：{{itemList.directoryName}}</el-col>
      <el-col :span="6" class="grid-cell">【方向】：{{itemList.direction}}</el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="24">
        <div>【题干】：</div>
        <div style="color: blue;" v-html="itemList.question"></div>
        <div v-if="itemList.questionType ==='1'">
          <p>单选题 选项：（以下选中的选项为正确答案）</p>
          <el-radio-group v-model="radioData"  class="ml-4" fill="#409eff">
            <el-radio :label="item.isRight" size="large"  v-for="item in itemList.options" :key="item.id">
              {{item.code}}:{{item.title}}</el-radio>
          </el-radio-group>
        </div>
        <div v-else-if="itemList.questionType ==='2'">
          <p>多选题 选项：（以下选中的选项为正确答案）</p>
          <el-checkbox-group v-model="checkState"  text-color="#409eff">
            <el-checkbox :label="item.isRight" v-for="item in itemList.options" :key="item.id"> {{item.title}}</el-checkbox>
          </el-checkbox-group>
        </div>
        <div v-else>简答题 选项：（以下选中为正确答案）</div>
      </el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="24">
        <div>【参考答案】：
          <el-button type="danger" @click="showVideo = !showVideo">视频答案预览</el-button>
          <br>
          <video v-show="showVideo" :src="itemList.videoURL" controls width="320" height="240"></video>
        </div>
      </el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="24">【答案解析】：<span v-html="itemList.answer"></span></el-col>
    </el-row>
    <hr>
    <el-row>
      <el-col :span="24">【题目备注】：<span v-html="itemList.remarks"></span></el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  name: '',
  components: {},
  props: {
    itemList: {
      type: Object,
      reuuired: true
    }
  },

  setup () {
    const radioData = ref(1)
    const checkState = ref([1])
    const showVideo = ref(false)
    return {
      checkState,
      radioData,
      showVideo
    }
  }
}
</script>

<style scoped lang="scss">
.el-radio-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}
.el-checkbox-group{
    color: aqua;
    display: flex;
  flex-direction: column;
  align-items: flex-start
}
</style>
